<template>
  <div>
    <a-modal v-model:visible="modelValue" items-center unmount-on-close @ok="ok">
      <a-tabs v-model:active-key="active" @tab-click="clear">
        <a-tab-pane key="1" :title="t['请选择分组']">
          <device-group v-model="groups"></device-group>
        </a-tab-pane>
        <a-tab-pane key="2" :title="t['请选择设备']">
          <device-selector v-model="mediaIds"></device-selector>
        </a-tab-pane>
        <a-tab-pane key="3" :title="t['全部设备']">
          <div class="text-center">{{ t["已选择全部设备"] }}</div>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { changeTheme } from "@/api/service/lcd-device/lcd-device";

const active = ref("1");
const t = translate("公共模块");
const props = defineProps<{
  themeId: string;
}>();
const modelValue = defineModel<boolean>("modelValue");

const groups = ref<string[]>([]);
const mediaIds = ref<string[]>([]);
const clear = () => {
  mediaIds.value = [];
  groups.value = [];
};
const ok = () => {
  if (
    (active.value === "3" && groups.value.length === 0 && mediaIds.value.length === 0) ||
    (active.value === "1" && groups.value.length > 0) ||
    (active.value === "2" && mediaIds.value.length > 0)
  )
    changeTheme({
      labels: groups.value,
      themeId: props.themeId,
      mediaIds: mediaIds.value
    });
};

watch(
  modelValue,
  () => {
    clear();
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<style lang="scss" scoped></style>
